<template>
  <BasicTable @register="registerTable">
    <template #tableTitle>
      <a-button type="primary" @click="add"> <PlusOutlined />新增 </a-button>
      <a-button type="primary"> <FormOutlined />编辑 </a-button>
      <a-button type="primary"> <CloseOutlined />删除 </a-button>
      <a-button type="primary"> <EyeOutlined />查看 </a-button>
      <slot name="basicFunction"></slot>
    </template>
  </BasicTable>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { useRouter } from 'vue-router';
  import { BasicTable, useTable } from '/@/components/Table';
  import { getBasicColumns } from '/@/views/demo/table/tableData';
  import { PlusOutlined, CloseOutlined, FormOutlined, EyeOutlined } from '@ant-design/icons-vue';
  import { demoListApi } from '/@/api/demo/table';

  export default defineComponent({
    components: {
      BasicTable,
      PlusOutlined,
      CloseOutlined,
      FormOutlined,
      EyeOutlined,
    },
    setup() {
      const router = useRouter();

      const [registerTable, { getForm }] = useTable({
        api: demoListApi,
        columns: getBasicColumns(),
        useSearchForm: true,
        showTableSetting: true,
        rowSelection: {
          type: 'checkbox',
        },
      });
      function add() {
        router.push({
          path: '/logisticsManagement/research/newOrder',
        });
      }
      function edit() {}
      function del() {}

      function see() {}

      function getFormValues() {
        console.log(getForm().getFieldsValue());
      }

      return {
        registerTable,
        getFormValues,
        add,
        edit,
        del,
        see,
      };
    },
  });
</script>
<style lang="less" scoped>
  /deep/button {
    margin-right: 5px;
  }
</style>
